<template>
  <div class="elderly-app">
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <h1>智慧养老</h1>
      <div class="user-avatar">
        <img :src="user.avatar || defaultAvatar" alt="用户头像">
        <span class="user-name">{{ baseUser.username || '未登录' }}</span>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="app-main">
      <!-- 个人信息卡片 -->
      <section class="card personal-info" v-show="activeTab === 'info'">
        <h2>基本信息</h2>
        <div class="info-grid-two-column">
          <!-- 左列 -->
          <div class="info-column">
            <div class="info-item">
              <span class="label">姓名:</span>
              <span class="value">{{ user.realName || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">性别:</span>
              <span class="value">
          {{
                  user.gender === 1 ? '男' :
                      user.gender === 2 ? '女' :
                          user.gender === 0 ? '未知' : '未设置'
                }}
        </span>
            </div>
            <div class="info-item">
              <span class="label">年龄:</span>
              <span class="value">{{ calculateAge() || '未知' }}</span>
            </div>
            <div class="info-item">
              <span class="label">出生日期:</span>
              <span class="value">
                {{ user.birthDate ? new Date(user.birthDate).toISOString().split('T')[0] : '未设置' }}
              </span>
            </div>
            <div class="info-item">
              <span class="label">邮箱:</span>
              <span class="value">
                {{ user.email || '无' }}
              </span>
            </div>
          </div>

          <!-- 右列 -->
          <div class="info-column">
            <div class="info-item">
              <span class="label">用户名:</span>
              <span class="value">{{ user.username || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">身份证号:</span>
              <span class="value">{{ user.idCard || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">联系方式:</span>
              <span class="value">{{ user.phone || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">居住地址:</span>
              <span class="value">{{ user.address || '未设置' }}</span>
            </div>
          </div>
        </div>

        <h2 style="margin-top: 20px;">健康信息</h2>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">身高(cm):</span>
            <span class="value">{{ userInfo.height || '未设置' }}</span>
          </div>
          <div class="info-item">
            <span class="label">体重(kg):</span>
            <span class="value">{{ userInfo.weight || '未设置' }}</span>
          </div>
          <div class="info-item">
            <span class="label">BMI:</span>
            <span class="value">{{ calculateBMI() || '未设置' }}</span>
          </div>
          <div class="info-item">
            <span class="label">血型:</span>
            <span class="value">{{ userInfo.bloodType || '未设置' }}</span>
          </div>
        </div>

        <div class="info-item">
          <span class="label">病史记录:</span>
          <span class="value">{{ userInfo.medicalHistory || '未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">过敏史:</span>
          <span class="value">{{ userInfo.allergyHistory || '未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">生活习惯:</span>
          <span class="value">{{ userInfo.dailyHabits || '未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">居住状况:</span>
          <span class="value">{{ userInfo.livingCondition || '未设置' }}</span>
        </div>

        <h2 style="margin-top: 20px;">紧急联系人</h2>
        <div class="info-grid-two-column">
          <div class="info-column">
            <div class="info-item">
              <span class="label">姓名:</span>
              <span class="value">{{ userInfo.emergencyContactName || '未设置' }}</span>
            </div>
          </div>
          <div class="info-column">
            <div class="info-item">
              <span class="label">电话:</span>
              <span class="value">{{ userInfo.emergencyContactPhone || '未设置' }}</span>
            </div>
          </div>
        </div>
        <div class="info-item">
          <span class="label">关系:</span>
          <span class="value">{{ userInfo.emergencyContactRelation || '未设置' }}</span>
        </div>
        <button class="edit-btn" @click="showEditDialog = true">编辑信息</button>
      </section>

      <!-- 社交卡片 -->
      <section class="card social" v-show="activeTab === 'social'">
        <h2>社交活动</h2>

        <!-- 好友列表 -->
        <div class="friends-section">
          <h3>我的好友 <span class="badge">{{ friends.length }}</span></h3>
          <div class="search-box">
            <input type="text" v-model="friendSearch" placeholder="搜索好友..." class="search-input">
            <button class="add-friend-btn" @click="showAddFriendDialog = true">添加好友</button>
          </div>

          <div v-if="loadingFriends" class="loading-tip">
            <span class="loader"></span> 加载中...
          </div>
          <div v-else-if="filteredFriends.length === 0" class="empty-tip">
            <img src="https://img.icons8.com/ios/100/000000/conference-call.png" alt="无好友" class="empty-img">
            <p>暂无好友</p>
          </div>
          <div v-else class="friends-list">
            <div v-for="friend in filteredFriends" :key="friend.id" class="friend-item">
              <div class="friend-avatar">
                <img :src="friend.avatar || defaultAvatar" alt="好友头像">
                <span class="online-status" :class="{ online: friend.isOnline }"></span>
              </div>
              <div class="friend-info">
                <span class="friend-name">{{ friend.name }}</span>
                <span class="friend-last-msg">{{ friend.lastMessage || '暂无聊天记录' }}</span>
              </div>
              <div class="friend-actions">
                <button class="chat-btn" @click="startChat(friend.id)">
                  <span class="icon">💬</span>
                </button>
                <button class="call-btn" @click="callFriend(friend.id)">
                  <span class="icon">📞</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 群组列表 -->
        <div class="groups-section">
          <h3>我的群组 <span class="badge">{{ groups.length }}</span></h3>
          <button class="create-group-btn" @click="showCreateGroupDialog = true">创建群组</button>

          <div v-if="loadingGroups" class="loading-tip">
            <span class="loader"></span> 加载中...
          </div>
          <div v-else-if="groups.length === 0" class="empty-tip">
            <img src="https://img.icons8.com/ios/100/000000/group-task.png" alt="无群组" class="empty-img">
            <p>暂无群组</p>
          </div>
          <div v-else class="groups-list">
            <div v-for="group in groups" :key="group.id" class="group-item" @click="enterGroup(group.id)">
              <div class="group-avatar">
                <img :src="group.avatar || defaultGroupAvatar" alt="群组头像">
                <span class="member-count">{{ group.memberCount }}人</span>
              </div>
              <div class="group-info">
                <span class="group-name">{{ group.name }}</span>
                <span class="group-last-msg">{{ group.lastMessage || '暂无群消息' }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 用药提醒卡片 -->
      <section class="card medication-reminder" v-show="activeTab === 'medication'">
        <div class="section-header">
          <h2>用药提醒</h2>
          <button class="add-btn" @click="showAddMedicationDialog = true">+ 添加</button>
        </div>
        <div v-if="loadingMedications" class="loading-tip">
          <span class="loader"></span> 加载中...
        </div>
        <div v-else-if="medications.length === 0" class="empty-tip">
          <img src="https://img.icons8.com/ios/100/000000/nothing-found.png" alt="无数据" class="empty-img">
          <p>暂无用药提醒</p>
        </div>
        <div v-else class="medication-list">
          <div v-for="(med, index) in medications" :key="index" class="medication-item" @click="toggleMedicationStatus(index)">
            <div class="med-info">
              <span class="med-name">{{ med.name }}</span>
              <span class="med-dosage">{{ med.dosage }}</span>
              <span class="med-time">{{ formatTime(med.time) }}</span>
            </div>
            <div class="med-status">
              <span :class="['status-dot', med.taken ? 'taken' : 'not-taken']"></span>
              <span>{{ med.taken ? '已服用' : '待服用' }}</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 娱乐活动卡片 -->
      <section class="card entertainment" v-show="activeTab === 'entertainment'">
        <h2>娱乐活动</h2>
        <div class="entertainment-grid">
          <div class="entertainment-item" @click="showActivity('music')">
            <span class="icon">🎵</span>
            <span>音乐欣赏</span>
          </div>
          <div class="entertainment-item" @click="showActivity('chess')">
            <span class="icon">♟️</span>
            <span>棋牌游戏</span>
          </div>
          <div class="entertainment-item" @click="showActivity('video')">
            <span class="icon">📺</span>
            <span>影视观看</span>
          </div>
          <div class="entertainment-item" @click="showActivity('exercise')">
            <span class="icon">🧘</span>
            <span>健身活动</span>
          </div>
          <div class="entertainment-item" @click="showActivity('reading')">
            <span class="icon">📖</span>
            <span>阅读</span>
          </div>
          <div class="entertainment-item" @click="showActivity('gardening')">
            <span class="icon">🌱</span>
            <span>园艺</span>
          </div>
        </div>
      </section>

      <!-- 紧急呼叫卡片 -->
      <section class="card emergency-call" v-show="activeTab === 'emergency'">
        <h2>紧急服务</h2>
        <div class="emergency-options">
          <button class="emergency-btn call" @click="makeEmergencyCall">
            <span class="icon">📞</span>
            <span>紧急呼叫</span>
          </button>
          <button class="emergency-btn help" @click="requestHelp">
            <span class="icon">🆘</span>
            <span>求助服务</span>
          </button>
          <button class="emergency-btn doctor" @click="contactDoctor">
            <span class="icon">👨‍⚕️</span>
            <span>联系医生</span>
          </button>
          <button class="emergency-btn police" @click="callPolice">
            <span class="icon">👮‍♂️</span>
            <span>报警</span>
          </button>
        </div>

        <div class="emergency-contacts">
          <h3>紧急联系人</h3>
          <div class="contact-item" v-if="userInfo.emergencyContactName">
            <span class="name">{{ userInfo.emergencyContactName }}</span>
            <span class="relation">{{ userInfo.emergencyContactRelation }}</span>
            <a :href="'tel:' + userInfo.emergencyContactPhone" class="phone">
              {{ userInfo.emergencyContactPhone }}
            </a>
          </div>
          <div v-else class="empty-contact">
            请先设置紧急联系人信息
          </div>
        </div>
      </section>
    </main>

    <!-- 底部导航 -->
    <footer class="app-footer">
      <button class="nav-btn" @click="activeTab = 'info'" :class="{ active: activeTab === 'info' }">
        <span class="icon">👤</span>
        <span>信息</span>
      </button>
      <button class="nav-btn" @click="activeTab = 'social'" :class="{ active: activeTab === 'social' }">
        <span class="icon">💬</span>
        <span>社交</span>
      </button>
      <button class="nav-btn" @click="activeTab = 'entertainment'" :class="{ active: activeTab === 'entertainment' }">
        <span class="icon">🎮</span>
        <span>娱乐</span>
      </button>
      <button class="nav-btn" @click="activeTab = 'medication'" :class="{ active: activeTab === 'medication' }">
        <span class="icon">💊</span>
        <span>用药</span>
      </button>
      <button class="nav-btn" @click="activeTab = 'emergency'" :class="{ active: activeTab === 'emergency' }">
        <span class="icon">🆘</span>
        <span>紧急</span>
      </button>
    </footer>

    <!-- 编辑健康信息对话框 -->
    <dialog v-if="showEditDialog" class="dialog" open>
      <h2>编辑个人信息</h2>

      <div class="tabs">
        <button @click="activeEditTab = 'basic'" :class="{ active: activeEditTab === 'basic' }">基本信息</button>
        <button @click="activeEditTab = 'health'" :class="{ active: activeEditTab === 'health' }">健康信息</button>
        <button @click="activeEditTab = 'emergency'" :class="{ active: activeEditTab === 'emergency' }">紧急联系人</button>
      </div>

      <form @submit.prevent="saveUserInfo">
        <!-- 基本信息 -->
        <div v-show="activeEditTab === 'basic'">
          <el-form :model="editUser" label-width="100px" label-position="left">
            <!-- 用户名 -->
            <el-form-item label="昵称" prop="username" required>
              <el-input
                  v-model="editUser.username"
                  placeholder="请输入昵称"
                  clearable
              />
            </el-form-item>
            <el-form-item label="姓名" prop="realName" required>
              <el-input
                  v-model="editUser.realName"
                  placeholder="请输入姓名"
                  clearable
              />
            </el-form-item>
            <el-form-item label="密码" prop="password" required>
              <el-input
                  v-model="editUser.password"
                  type="password"
                  show-password
                  placeholder="请输入密码"
                  clearable
              />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select v-model="editUser.gender" placeholder="请选择性别" style="width: 100%">
                <el-option label="男" :value="1" />
                <el-option label="女" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthDate">
              <el-date-picker v-model="editUser.birthDate" type="date" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input
                  v-model="editUser.idCard"
                  placeholder="请输入18位身份证号"
                  maxlength="18"
                  show-word-limit
                  clearable
              />
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input
                  v-model="editUser.phone"
                  placeholder="请输入11位手机号码"
                  maxlength="11"
                  clearable
              />
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
              <el-input
                  v-model="editUser.email"
                  placeholder="请输入电子邮箱"
                  clearable
              />
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input
                  v-model="editUser.address"
                  placeholder="请输入详细地址"
                  clearable
              />
            </el-form-item>
            <el-form-item label="头像" prop="avatarUrl">
              <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :auto-upload="false"
                  :on-change="handleAvatarUpload"
              >
                <img v-if="editUser.avatarUrl" :src="editUser.avatarUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">支持JPG/PNG格式，大小不超过2MB</div>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>

        <!-- 健康信息 -->
        <div v-show="activeEditTab === 'health'">
          <el-row :gutter="0" class="form-grid">
            <el-col :span="24">
              <el-form-item label="身高(cm):">
                <el-input-number
                    v-model="editUserInfo.height"
                    placeholder="请输入身高"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="体重(kg):">
                <el-input-number
                    v-model="editUserInfo.weight"
                    placeholder="请输入体重"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="血型:">
            <el-select v-model="editUserInfo.bloodType" placeholder="请选择血型" style="width: 100%">
              <el-option label="请选择血型" value="" />
              <el-option label="A型" value="A" />
              <el-option label="B型" value="B" />
              <el-option label="AB型" value="AB" />
              <el-option label="O型" value="O" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>

          <el-form-item label="病史记录:">
            <el-input
                v-model="editUserInfo.medicalHistory"
                type="textarea"
                :rows="3"
                placeholder="请输入病史记录"
            />
          </el-form-item>

          <el-form-item label="过敏史:">
            <el-input
                v-model="editUserInfo.allergyHistory"
                type="textarea"
                :rows="3"
                placeholder="请输入过敏史"
            />
          </el-form-item>

          <el-form-item label="生活习惯:">
            <el-input
                v-model="editUserInfo.dailyHabits"
                type="textarea"
                :rows="3"
                placeholder="请输入生活习惯"
            />
          </el-form-item>

          <el-form-item label="居住状况:">
            <el-input
                v-model="editUserInfo.livingCondition"
                type="textarea"
                :rows="3"
                placeholder="请输入居住状况描述"
            />
          </el-form-item>
        </div>

        <!-- 紧急联系人 -->
        <div v-show="activeEditTab === 'emergency'">
          <el-form-item label="紧急联系人姓名:">
            <el-input
                v-model="editUserInfo.emergencyContactName"
                placeholder="请输入姓名"
            />
          </el-form-item>

          <el-form-item label="紧急联系人电话:">
            <el-input
                v-model="editUserInfo.emergencyContactPhone"
                placeholder="请输入电话号码"
                :maxlength="11"
                show-word-limit
            />
          </el-form-item>

          <el-form-item label="紧急联系人关系:">
            <el-input
                v-model="editUserInfo.emergencyContactRelation"
                placeholder="例如：儿子、女儿等"
            />
          </el-form-item>
        </div>

        <div class="dialog-actions">
          <button type="button" class="cancel-btn" @click="showEditDialog = false">取消</button>
          <button type="submit" class="confirm-btn">保存</button>
        </div>
      </form>
    </dialog>

    <!-- 添加好友对话框 -->
    <dialog v-if="showAddFriendDialog" class="dialog" open>
      <h2>添加好友</h2>
      <form @submit.prevent="addFriend">
        <div class="form-group">
          <label>好友ID/手机号:</label>
          <input v-model="newFriendId" type="text" placeholder="请输入好友ID或手机号" required>
        </div>
        <div class="form-group">
          <label>验证信息:</label>
          <textarea v-model="newFriendMessage" placeholder="请输入验证信息"></textarea>
        </div>
        <div class="dialog-actions">
          <button type="button" class="cancel-btn" @click="showAddFriendDialog = false">取消</button>
          <button type="submit" class="confirm-btn">发送请求</button>
        </div>
      </form>
    </dialog>

    <!-- 创建群组对话框 -->
    <dialog v-if="showCreateGroupDialog" class="dialog" open>
      <h2>创建群组</h2>
      <form @submit.prevent="createGroup">
        <div class="form-group">
          <label>群组名称:</label>
          <input v-model="newGroupName" type="text" placeholder="请输入群组名称" required>
        </div>
        <div class="form-group">
          <label>群组描述:</label>
          <textarea v-model="newGroupDescription" placeholder="请输入群组描述"></textarea>
        </div>
        <div class="form-group">
          <label>邀请好友:</label>
          <div class="friend-selector">
            <div v-for="friend in friends" :key="friend.id" class="friend-option">
              <input type="checkbox" :id="'friend-'+friend.id" :value="friend.id" v-model="selectedFriends">
              <label :for="'friend-'+friend.id">{{ friend.name }}</label>
            </div>
          </div>
        </div>
        <div class="dialog-actions">
          <button type="button" class="cancel-btn" @click="showCreateGroupDialog = false">取消</button>
          <button type="submit" class="confirm-btn">创建</button>
        </div>
      </form>
    </dialog>

    <!-- 添加用药提醒对话框 -->
    <dialog v-if="showAddMedicationDialog" class="dialog" open>
      <h2>添加用药提醒</h2>
      <form @submit.prevent="addMedication">
        <div class="form-group">
          <label>药品名称:</label>
          <input v-model="newMedication.name" type="text" placeholder="请输入药品名称" required>
        </div>
        <div class="form-group">
          <label>用药时间:</label>
          <input v-model="newMedication.time" type="time" required>
        </div>
        <div class="form-group">
          <label>用药剂量:</label>
          <input v-model="newMedication.dosage" type="text" placeholder="例如：1片/次">
        </div>
        <div class="form-group">
          <label>用药说明:</label>
          <textarea v-model="newMedication.instruction" placeholder="请输入用药说明"></textarea>
        </div>
        <div class="form-group">
          <label>重复周期:</label>
          <select v-model="newMedication.repeat">
            <option value="daily">每天</option>
            <option value="weekly">每周</option>
            <option value="monthly">每月</option>
            <option value="once">仅一次</option>
          </select>
        </div>
        <div class="dialog-actions">
          <button type="button" class="cancel-btn" @click="showAddMedicationDialog = false">取消</button>
          <button type="submit" class="confirm-btn">添加</button>
        </div>
      </form>
    </dialog>

    <!-- 活动详情弹窗 -->
    <dialog v-if="showActivityDialog" class="activity-dialog" open>
      <h2>{{ currentActivity.title }}</h2>
      <div class="activity-content">
        <img :src="currentActivity.image" :alt="currentActivity.title" class="activity-img">
        <p>{{ currentActivity.description }}</p>
        <div class="activity-tips" v-if="currentActivity.tips">
          <h3>小贴士:</h3>
          <ul>
            <li v-for="(tip, index) in currentActivity.tips" :key="index">{{ tip }}</li>
          </ul>
        </div>
      </div>
      <button class="close-btn" @click="showActivityDialog = false">关闭</button>
      <button class="join-btn" @click="joinActivity" v-if="currentActivity.canJoin">立即参与</button>
    </dialog>

    <!-- 紧急呼叫确认对话框 -->
    <dialog v-if="showEmergencyConfirm" class="dialog emergency-confirm" open>
      <h2>紧急呼叫确认</h2>
      <p>您确定要拨打紧急电话吗？</p>
      <div class="emergency-number" v-if="emergencyNumber">
        即将拨打: <strong>{{ emergencyNumber }}</strong>
      </div>
      <div class="dialog-actions">
        <button type="button" class="cancel-btn" @click="showEmergencyConfirm = false">取消</button>
        <button type="button" class="confirm-btn emergency" @click="confirmEmergencyCall">确认拨打</button>
      </div>
    </dialog>
  </div>
</template>

<script>
import {ref, onMounted, computed} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";


export default {
  setup() {
    // 当前激活的标签页
    const activeTab = ref('info')
    const activeEditTab = ref('basic')

    // 基础用户信息
    const user = ref({
      userId: null,          // 用户ID
      username: '',         // 用户名
      password: '',         // 密码
      realName: '',         // 真实姓名
      phone: '',            // 手机号
      email: '',            // 邮箱
      avatarUrl: '',        // 头像URL
      idCard: '',           // 身份证号
      gender: null,         // 性别（可以用0/1或其它编码）
      birthDate: null,      // 生日（Date对象或字符串格式）
      address: ''           // 地址
    })

    // 老人健康信息
    const userInfo = ref({
      height: null,
      weight: null,
      bloodType: '',
      medicalHistory: '',
      allergyHistory: '',
      medicationCondition: '',
      emergencyContactName: '',
      emergencyContactPhone: '',
      emergencyContactRelation: '',
      livingCondition: '',
      dailyHabits: ''
    })

    // 编辑中的用户信息
    const editUser = ref({...user.value})
    const editUserInfo = ref({...userInfo.value})
    const showEditDialog = ref(false)

    // 计算BMI
    const calculateBMI = () => {
      if (!userInfo.value.height || !userInfo.value.weight) return null
      const heightInM = userInfo.value.height / 100
      const bmi = (userInfo.value.weight / (heightInM * heightInM)).toFixed(1)
      return bmi
    }
    // 获取登录用户数据
    const baseUser = ref(getUser());

    // 根据生日计算用户年龄（支持"YYYY-MM-DD"格式）
    const calculateAge = () => {
      if (!baseUser.value || !baseUser.value.birthDate) {
        return '未知';
      }
      // 解析生日日期（支持"2025-06-19"格式）
      const birthDate = new Date(baseUser.value.birthDate);
      if (isNaN(birthDate.getTime())) {
        return '日期格式错误';
      }
      // 获取当前日期
      const today = new Date();
      // 计算年龄
      let age = today.getFullYear() - birthDate.getFullYear();
      // 调整尚未过生日的情况
      const monthDiff = today.getMonth() - birthDate.getMonth();
      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
        age--;
      }
      console.log("返回的age:"+age);
      return age;
    };

    // 加载用户数据
    const loadUserData = () => {
      // 加载用户健康信息
      axios.get(`${BASE_URL}/api/v1/elderly/getInfo`, {
        params: {
          userId: getUser().userId
        }
      }).then(response => {
        if (response.data.code === 2000) {
          userInfo.value = response.data.data;
          editUserInfo.value = {...userInfo.value}
        } else {
          console.log('获取用户信息失败:', response.data);
        }
      }).catch(error => {
        console.error('获取用户信息出错:', error);
      })

      // 加载用户基本信息
      axios.get(`${BASE_URL}/api/v1/admins/detail`, {
        params: {
          userId: getUser().userId
        }
      }).then(response => {
        if (response.data.code === 2000) {
          user.value = response.data.data;
          editUser.value = {...user.value}
          editUser.value.birthDate = new Date(user.value.birthDate).toISOString().split('T')[0];
          console.log("出生日期："+editUser.value.birthDate)
        } else {
          console.log('获取用户基本信息失败:', response.data);
        }
      }).catch(error => {
        console.error('获取用户基本信息出错:', error);
      })
    }

    // 保存用户信息
    const saveUserInfo = () => {
      // 保存基本数据
      axios.post(`${BASE_URL}/api/v1/admins/update${editUser.value}`).then(response1 => {
        if (response1.data.code === 2000){
          user.value = {...editUser.value}
          ElMessage.success('基本信息保存成功')
          console.log('用户信息保存成功')
        }else {
          ElMessage.error('保存失败: ' + response1.data.message)
        }
      }).catch( error => {
        console.error('完整错误响应:', error.data);
        console.error('保存用户信息出错:', error)
      })
      // 保存健康数据
      axios.post(BASE_URL+'/api/v1/elderly/updateInfo', editUserInfo.value).then(response2 => {
        if (response2.data.code === 2000) {
          userInfo.value = {...editUserInfo.value}
          ElMessage.success('健康信息保存成功')
          console.log('健康信息保存成功')
        } else {
          ElMessage.error('保存失败: ' + response2.data.message)
        }
      }).catch(error => {
        console.error('保存用户信息出错:', error)
      })

      showEditDialog.value = false
    }

    // 社交相关数据
    const friends = ref([])
    const groups = ref([])
    const friendSearch = ref('')
    const loadingFriends = ref(false)
    const loadingGroups = ref(false)
    const showAddFriendDialog = ref(false)
    const showCreateGroupDialog = ref(false)
    const newFriendId = ref('')
    const newFriendMessage = ref('我是' + (userInfo.value.name || '') + '，请求添加您为好友')
    const newGroupName = ref('')
    const newGroupDescription = ref('')
    const selectedFriends = ref([])

    // 默认群组头像
    const defaultGroupAvatar = ref('')

    // 计算属性 - 过滤好友列表
    const filteredFriends = computed(() => {
      return friends.value.filter(friend =>
          friend.name.toLowerCase().includes(friendSearch.value.toLowerCase())
      )
    })

    // 加载好友列表
    const loadFriends = () => {
      loadingFriends.value = true
      // 模拟API请求
      setTimeout(() => {
        friends.value = [
          {
            id: 1,
            name: '李四',
            avatar: '',
            isOnline: true,
            lastMessage: '最近身体怎么样？'
          },
          {
            id: 2,
            name: '王五',
            avatar: '',
            isOnline: false,
            lastMessage: '明天一起下棋吗？'
          },
          {
            id: 3,
            name: '赵六',
            avatar: '',
            isOnline: true,
            lastMessage: '记得按时吃药'
          },
          {
            id: 4,
            name: '钱七',
            avatar: '',
            isOnline: false,
            lastMessage: '社区有新活动'
          }
        ]
        loadingFriends.value = false
      }, 800)
    }

    // 加载群组列表
    const loadGroups = () => {
      loadingGroups.value = true
      // 模拟API请求
      setTimeout(() => {
        groups.value = [
          {
            id: 1,
            name: '夕阳红棋牌社',
            avatar: '',
            memberCount: 12,
            lastMessage: '张三: 明天下午2点活动室见'
          },
          {
            id: 2,
            name: '健康养生交流',
            avatar: '',
            memberCount: 24,
            lastMessage: '李四分享了健康食谱'
          },
          {
            id: 3,
            name: '社区舞蹈队',
            avatar: '',
            memberCount: 8,
            lastMessage: '王五: 本周五排练'
          }
        ]
        loadingGroups.value = false
      }, 800)
    }

    // 添加好友
    const addFriend = () => {
      if (!newFriendId.value) return

      // 模拟API请求
      const newFriend = {
        id: Date.now(),
        name: newFriendId.value,
        avatar: '',
        isOnline: false,
        lastMessage: ''
      }

      friends.value.unshift(newFriend)
      showAddFriendDialog.value = false
      newFriendId.value = ''
      alert(`已发送好友请求给 ${newFriend.name}`)
    }

    // 创建群组
    const createGroup = () => {
      if (!newGroupName.value) return

      // 模拟API请求
      const newGroup = {
        id: Date.now(),
        name: newGroupName.value,
        avatar: '',
        memberCount: 1 + selectedFriends.value.length,
        lastMessage: '你创建了群组'
      }

      groups.value.unshift(newGroup)
      showCreateGroupDialog.value = false
      newGroupName.value = ''
      newGroupDescription.value = ''
      selectedFriends.value = []
      alert(`群组 ${newGroup.name} 创建成功`)
    }

    // 开始聊天
    const startChat = (friendId) => {
      const friend = friends.value.find(f => f.id === friendId)
      alert(`开始与 ${friend.name} 聊天`)
      // 实际应用中这里会打开聊天界面
    }

    // 呼叫好友
    const callFriend = (friendId) => {
      const friend = friends.value.find(f => f.id === friendId)
      if (confirm(`确定要呼叫 ${friend.name} 吗？`)) {
        alert(`正在呼叫 ${friend.name}...`)
      }
    }

    // 进入群组
    const enterGroup = (groupId) => {
      const group = groups.value.find(g => g.id === groupId)
      alert(`进入群组: ${group.name}`)
      // 实际应用中这里会打开群聊界面
    }

    // 用药提醒相关
    const medications = ref([])
    const loadingMedications = ref(false)
    const showAddMedicationDialog = ref(false)
    const newMedication = ref({
      name: '',
      time: '',
      dosage: '',
      instruction: '',
      repeat: 'daily',
      taken: false
    })

    // 活动相关
    const showActivityDialog = ref(false)
    const currentActivity = ref({
      title: '',
      description: '',
      image: '',
      tips: [],
      canJoin: true
    })

    // 紧急呼叫相关
    const showEmergencyConfirm = ref(false)
    const emergencyNumber = ref('')

    // 默认头像
    const defaultAvatar = ref('')

    // 模拟活动数据
    const activities = {
      music: {
        title: '音乐欣赏',
        description: '放松心情，享受经典老歌和轻音乐，有助于缓解压力，改善睡眠质量。',
        image: 'https://img.freepik.com/free-photo/elderly-man-listening-music_23-2148733764.jpg',
        tips: [
          '每天听30分钟舒缓音乐有助于降低血压',
          '选择熟悉的歌曲可以唤起美好回忆',
          '音量不宜过大，保护听力'
        ],
        canJoin: true
      },
      chess: {
        title: '棋牌游戏',
        description: '象棋、围棋、扑克等智力游戏，锻炼大脑，预防认知障碍。',
        image: 'https://img.freepik.com/free-photo/elderly-people-playing-chess_23-2148733762.jpg',
        tips: [
          '每周2-3次棋牌活动有助于保持大脑活跃',
          '每次游戏时间不宜超过2小时',
          '社区活动室每周三下午有棋牌活动'
        ],
        canJoin: true
      },
      video: {
        title: '影视观看',
        description: '经典电影、电视剧和纪录片，丰富精神生活，回忆往昔岁月。',
        image: 'https://img.freepik.com/free-photo/elderly-couple-watching-tv_23-2148733766.jpg',
        tips: [
          '观看时间每次不超过1小时',
          '保持适当距离，保护视力',
          '可与家人朋友一起观看增进感情'
        ],
        canJoin: false
      },
      exercise: {
        title: '健身活动',
        description: '适合长者的太极、瑜伽和轻度健身操，保持身体健康和灵活性。',
        image: 'https://img.freepik.com/free-photo/elderly-woman-doing-yoga_23-2148733768.jpg',
        tips: [
          '晨练前适当进食',
          '运动强度以微微出汗为宜',
          '社区每天早上7点有太极活动'
        ],
        canJoin: true
      },
      reading: {
        title: '阅读活动',
        description: '阅读书籍、报纸和杂志，保持思维活跃，了解时事新闻。',
        image: 'https://img.freepik.com/free-photo/elderly-man-reading-book_23-2148733760.jpg',
        tips: [
          '选择字体较大的书籍保护视力',
          '阅读时光线要充足',
          '可与书友会成员交流读书心得'
        ],
        canJoin: true
      },
      gardening: {
        title: '园艺活动',
        description: '种植花草蔬菜，亲近自然，活动筋骨，享受种植乐趣。',
        image: 'https://img.freepik.com/free-photo/elderly-man-gardening_23-2148733765.jpg',
        tips: [
          '注意防晒和补充水分',
          '使用适合的工具减轻腰部负担',
          '社区有共享花园可供使用'
        ],
        canJoin: true
      }
    }

    // 加载用药数据
    const loadMedications = () => {
      loadingMedications.value = true
      // 模拟API请求延迟
      setTimeout(() => {
        medications.value = [
          {
            name: '降压药',
            time: '08:00',
            dosage: '1片/次',
            instruction: '早餐后服用，避免与葡萄柚同食',
            repeat: 'daily',
            taken: false
          },
          {
            name: '降糖药',
            time: '12:00',
            dosage: '2片/次',
            instruction: '餐前30分钟服用',
            repeat: 'daily',
            taken: false
          },
          {
            name: '阿司匹林',
            time: '20:00',
            dosage: '1片/次',
            instruction: '预防心血管疾病',
            repeat: 'daily',
            taken: false
          },
          {
            name: '钙片',
            time: '21:00',
            dosage: '1片/次',
            instruction: '睡前服用',
            repeat: 'daily',
            taken: false
          }
        ]
        loadingMedications.value = false
      }, 800)
    }

    // 初始化加载数据
    onMounted(() => {
      loadUserData()
      loadMedications()
      loadFriends()
      loadGroups()
    })

    // 添加用药提醒
    const addMedication = () => {
      medications.value.push({...newMedication.value})
      showAddMedicationDialog.value = false
      // 重置表单
      newMedication.value = {
        name: '',
        time: '',
        dosage: '',
        instruction: '',
        repeat: 'daily',
        taken: false
      }
      alert('用药提醒添加成功')
    }

    // 切换用药状态
    const toggleMedicationStatus = (index) => {
      medications.value[index].taken = !medications.value[index].taken
      // 这里应该调用API更新状态
    }

    // 紧急呼叫
    const makeEmergencyCall = () => {
      if (userInfo.value.emergencyContactPhone) {
        emergencyNumber.value = userInfo.value.emergencyContactPhone
        showEmergencyConfirm.value = true
      } else {
        alert('请先设置紧急联系人信息')
        activeTab.value = 'info'
        showEditDialog.value = true
        activeEditTab.value = 'emergency'
      }
    }

    // 确认紧急呼叫
    const confirmEmergencyCall = () => {
      showEmergencyConfirm.value = false
      // 这里应该是实际的呼叫逻辑
      alert(`正在呼叫: ${emergencyNumber.value}`)
    }

    // 请求帮助
    const requestHelp = () => {
      emergencyNumber.value = '12349' // 社区服务热线
      showEmergencyConfirm.value = true
    }

    // 联系医生
    const contactDoctor = () => {
      emergencyNumber.value = '120' // 急救电话
      showEmergencyConfirm.value = true
    }

    // 报警
    const callPolice = () => {
      emergencyNumber.value = '110' // 报警电话
      showEmergencyConfirm.value = true
    }

    // 显示活动详情
    const showActivity = (type) => {
      currentActivity.value = activities[type]
      showActivityDialog.value = true
    }

    // 参与活动
    const joinActivity = () => {
      alert(`您已成功报名参加${currentActivity.value.title}活动！`)
      showActivityDialog.value = false
    }

    // 格式化时间显示
    const formatTime = (timeString) => {
      if (!timeString) return ''
      const [hours, minutes] = timeString.split(':')
      return `${hours}:${minutes}`
    }

    return {
      activeTab,
      activeEditTab,
      baseUser,
      user,
      editUser,
      userInfo,
      editUserInfo,
      showEditDialog,
      friends,
      groups,
      friendSearch,
      filteredFriends,
      loadingFriends,
      loadingGroups,
      showAddFriendDialog,
      showCreateGroupDialog,
      newFriendId,
      newFriendMessage,
      newGroupName,
      newGroupDescription,
      selectedFriends,
      medications,
      loadingMedications,
      showAddMedicationDialog,
      newMedication,
      showActivityDialog,
      currentActivity,
      showEmergencyConfirm,
      emergencyNumber,
      defaultAvatar,
      defaultGroupAvatar,
      calculateBMI,
      calculateAge,
      saveUserInfo,
      addFriend,
      createGroup,
      startChat,
      callFriend,
      enterGroup,
      addMedication,
      toggleMedicationStatus,
      makeEmergencyCall,
      confirmEmergencyCall,
      requestHelp,
      contactDoctor,
      callPolice,
      showActivity,
      joinActivity,
      formatTime
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.elderly-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: #f5f7fa;
  color: #333;
  font-size: 16px;
}

/* 头部样式 */
.app-header {
  background-color: #4a6fa5;
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.app-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #fff;
  border: 2px solid #fff;
}

.user-name {
  font-size: 0.95rem;
}

.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader >>> .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.el-form-item {
  margin-bottom: 22px;
}

/* 紧凑型信息项样式 */
.info-item {
  display: flex;
  margin-bottom: 10px;  /* 减少行间距 */
  font-size: 0.95rem;  /* 稍微减小字体大小 */
  line-height: 1.4;    /* 调整行高 */
}

.info-item .label {
  font-weight: 500;
  width: 80px;        /* 减少标签宽度 */
  color: #666;
  flex-shrink: 0;
  margin-right: 0px;  /* 减少标签与值的间距 */
}

.info-item .value {
  flex: 1;
  color: #333;
  word-break: break-word; /* 长文本自动换行 */
}

/* 两列布局调整 */
.info-grid-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;          /* 减少列间距 */
}

.info-column {
  display: flex;
  flex-direction: column;
  gap: 8px;           /* 减少行间距 */
}

/* 健康信息网格调整 */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;           /* 减少网格间距 */
  margin-bottom: 10px;
}

/* 紧急联系人两列布局 */
.info-grid-two-column .info-column {
  gap: 6px;           /* 更紧凑的行间距 */
}


/* 主体内容样式 */
.app-main {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

/* 卡片样式 */
.card {
  background-color: white;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card h2 {
  margin-top: 0;
  color: #4a6fa5;
  font-size: 1.25rem;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* 个人信息卡片样式 */
.info-item {
  display: flex;
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: 1.5;
}

.info-item .label {
  font-weight: 500;
  width: 100px;
  color: #666;
  flex-shrink: 0;
}

.info-item .value {
  flex: 1;
  color: #333;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* 社交页面样式 */
.social h2 {
  margin-bottom: 20px;
}

/* 好友和群组部分标题 */
.friends-section h3,
.groups-section h3 {
  font-size: 1.1rem;
  color: #4a6fa5;
  margin: 20px 0 10px;
  display: flex;
  align-items: center;
}

.badge {
  background-color: #4a6fa5;
  color: white;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.8rem;
  margin-left: 8px;
}

/* 搜索框和按钮 */
.search-box {
  display: flex;
  margin-bottom: 15px;
  gap: 10px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.add-friend-btn,
.create-group-btn {
  background-color: #4a6fa5;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9rem;
}

/* 好友列表样式 */
.friends-list,
.groups-list {
  margin-top: 10px;
}

.friend-item,
.group-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  background-color: #f8f9fa;
  transition: background-color 0.2s;
}

.group-item {
  cursor: pointer;
}

.friend-item:hover,
.group-item:hover {
  background-color: #e9f0f8;
}

/* 头像样式 */
.friend-avatar,
.group-avatar {
  position: relative;
  margin-right: 12px;
}

.friend-avatar img,
.group-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #fff;
}

.online-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  border: 2px solid #fff;
}

.online-status.online {
  background-color: #4caf50;
}

.member-count {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background-color: #4a6fa5;
  color: white;
  border-radius: 10px;
  padding: 1px 5px;
  font-size: 0.7rem;
}

/* 好友/群组信息 */
.friend-info,
.group-info {
  flex: 1;
  min-width: 0;
}

.friend-name,
.group-name {
  display: block;
  font-weight: 500;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-last-msg,
.group-last-msg {
  font-size: 0.85rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 好友操作按钮 */
.friend-actions {
  display: flex;
  gap: 8px;
}

.chat-btn,
.call-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 5px;
}

.chat-btn {
  color: #4a6fa5;
}

.call-btn {
  color: #4caf50;
}

/* 好友选择器 */
.friend-selector {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
}

.friend-option {
  display: flex;
  align-items: center;
  padding: 6px 0;
}

.friend-option input {
  margin-right: 8px;
}

/* 用药提醒样式 */
.medication-list {
  margin-top: 10px;
}

.medication-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.medication-item:hover {
  background-color: #f9f9f9;
}

.med-info {
  flex: 1;
}

.med-name {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.med-dosage {
  font-size: 0.85rem;
  color: #666;
  margin-right: 10px;
}

.med-time {
  font-size: 0.85rem;
  color: #4a6fa5;
  font-weight: 500;
}

.med-status {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  gap: 6px;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-dot.taken {
  background-color: #4caf50;
}

.status-dot.not-taken {
  background-color: #f44336;
}

/* 娱乐活动样式 */
.entertainment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 15px;
}

.entertainment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.entertainment-item:hover {
  background-color: #e9f0f8;
  transform: translateY(-2px);
}

.entertainment-item .icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

/* 紧急服务样式 */
.emergency-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 15px 0;
}

.emergency-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.emergency-btn .icon {
  margin-right: 10px;
  font-size: 1.2rem;
}

.emergency-btn.call {
  background-color: #f44336;
  color: white;
}

.emergency-btn.help {
  background-color: #ff9800;
  color: white;
}

.emergency-btn.doctor {
  background-color: #4caf50;
  color: white;
}

.emergency-btn.police {
  background-color: #2196f3;
  color: white;
}

.emergency-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.emergency-contacts {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.emergency-contacts h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #555;
  font-size: 1rem;
}

.contact-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 6px;
}

.contact-item .name {
  font-weight: 500;
}

.contact-item .relation {
  color: #666;
  font-size: 0.9rem;
}

.contact-item .phone {
  grid-column: span 2;
  color: #4a6fa5;
  text-decoration: none;
}

.empty-contact {
  color: #999;
  text-align: center;
  padding: 15px;
}

/* 底部导航样式 */
.app-footer {
  display: flex;
  justify-content: space-around;
  background-color: white;
  padding: 10px 0;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 8px 5px;
  flex: 1;
  transition: all 0.2s;
}

.nav-btn .icon {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.nav-btn.active {
  color: #4a6fa5;
  transform: translateY(-2px);
}

/* 按钮样式 */
.edit-btn, .add-btn {
  background-color: #4a6fa5;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 15px;
  margin-top: 15px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
}

.add-btn {
  background-color: transparent;
  color: #4a6fa5;
  border: 1px solid #4a6fa5;
  padding: 6px 12px;
  margin-top: 0;
}

.edit-btn:hover, .add-btn:hover {
  background-color: #3a5a8f;
  color: white;
}

/* 对话框样式 */
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 12px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  width: 90%;
  max-width: 450px;
  max-height: 80vh;
  overflow-y: auto;
}

.dialog h2 {
  margin-top: 0;
  color: #4a6fa5;
  font-size: 1.3rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 标签页样式 */
.tabs {
  display: flex;
  margin: 15px 0 20px;
  border-bottom: 1px solid #eee;
}

.tabs button {
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-right: 5px;
  font-size: 0.95rem;
  color: #666;
  transition: all 0.2s;
}

.tabs button.active {
  border-bottom-color: #4a6fa5;
  color: #4a6fa5;
  font-weight: 500;
}

/* 表单样式 */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #555;
}

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: #4a6fa5;
  outline: none;
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* 对话框按钮样式 */
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}

.cancel-btn, .confirm-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #666;
}

.confirm-btn {
  background-color: #4a6fa5;
  color: white;
}

.confirm-btn.emergency {
  background-color: #f44336;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

.confirm-btn:hover {
  background-color: #3a5a8f;
}

.confirm-btn.emergency:hover {
  background-color: #d32f2f;
}

/* 活动对话框样式 */
.activity-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 12px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  width: 90%;
  max-width: 500px;
}

.activity-content {
  margin: 15px 0;
}

.activity-img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
  max-height: 200px;
  object-fit: cover;
}

.activity-tips {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.activity-tips h3 {
  color: #4a6fa5;
  font-size: 1rem;
  margin-bottom: 10px;
}

.activity-tips ul {
  padding-left: 20px;
  color: #555;
}

.activity-tips li {
  margin-bottom: 8px;
}

.close-btn, .join-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 10px;
}

.close-btn {
  background-color: #f0f0f0;
  color: #666;
}

.join-btn {
  background-color: #4a6fa5;
  color: white;
}

/* 紧急呼叫确认对话框 */
.emergency-confirm {
  text-align: center;
}

.emergency-confirm p {
  margin-bottom: 15px;
}

.emergency-number {
  margin: 15px 0;
  padding: 10px;
  background-color: #fff8e1;
  border-radius: 6px;
  color: #ff6f00;
}

/* 加载状态和空状态样式 */
.loading-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  color: #666;
}

.loader {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #4a6fa5;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.empty-tip {
  text-align: center;
  padding: 30px 0;
  color: #999;
}

.empty-img {
  width: 100px;
  opacity: 0.6;
  margin-bottom: 15px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .emergency-options {
    grid-template-columns: 1fr;
  }

  .dialog {
    width: 95%;
    padding: 15px;
  }

  .app-footer {
    padding: 8px 0;
  }

  .nav-btn .icon {
    font-size: 1.2rem;
  }

  .nav-btn span {
    font-size: 0.7rem;
  }
}
</style>